<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>范闲商城-添加评价</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" th:href="@{/static/step/layui/css/layui.css}" />
	<link rel="stylesheet" th:href="@{/static/step/layui/mods/extend/step/step.css}" />
	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}

	</style>
</head>
<body>
	<div th:replace="header::top"></div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/pic/fanxian-mall.png" width="150px" height="60px"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;添加评价</div>
		<div class="search_con fr">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>		
	</div>

	<div class="common_list_con clearfix">
		<table class="layui-table" lay-skin="line" style="width: 95%; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px;">
			<colgroup>
				<col width="5%">
				<col width="25%">
				<col width="25%">
				<col width="15%">
				<col width="15%">
				<col width="15%">
				<col>
			</colgroup>
			<thead>
			<tr>
				<th></th>
				<th>商品图片</th>
				<th>商品名称</th>
				<th>商品价格</th>
				<th>数量</th>
				<th>小计</th>
			</tr>
			</thead>
			<tbody id="LAY_OrderCartList">
			<tr>
				<th>1</th>
				<th><img src="/static/images/goods/goods003.jpg"></th>
				<th>大兴大棚草莓</th>
				<th>16.80元</th>
				<th>1</th>
				<th>16.80元</th>
			</tr>
			</tbody>
		</table>
	</div>
	<h3 class="common_title">添加评价</h3>
	<div class="common_list_con clearfix">
		<div style="width: 95%; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px;">
			<form class="layui-form" action="">
				<br>
				<input id="orderNo" name="orderNo" type="hidden">
				<div class="layui-form-item">
					<label class="layui-form-label layui-inline">评价评分</label>
					<div class="layui-input-inline layui-input-wrap layui-inline">
						<div id="ID-rate-demo-setText-1"></div>
						<input type="hidden" id="hiddenRating" name="rating" value="">
					</div>
				</div>

				<div class="layui-form-item layui-form-text">
					<label class="layui-form-label">评价内容</label>
					<div class="layui-input-block">
						<textarea name="evaluate" placeholder="" class="layui-textarea" style="width: 600px"></textarea>
					</div>
				</div>

				<div class="layui-form-item">
					<label class="layui-form-label">评价图片</label>
					<div class="layui-input-block">
						<div class="layui-upload">
							<div class="layui-upload-list layui-inline">
								<img width="150px" height="150px" class="layui-upload-img" id="demo1">
								<input type="hidden" name="evaluateImage" id="imageId">
								<p id="demoText"></p>
							</div>
							<button type="button" class="layui-btn layui-inline" id="uploadId">上传图片</button>
						</div>
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<input type="checkbox" name="anonymous" value="1" title="是否匿名评论">
					</div>
				</div>

				<div class="layui-form-item">
					<div class="layui-input-block">
						<button type="submit" class="layui-btn" lay-submit lay-filter="evaluateAdd">立即提交</button>
						<button type="reset" class="layui-btn layui-btn-primary">重置</button>
					</div>
				</div>
			</form>
		</div>

	</div>

	<div class="order_submit clearfix">
		<a href="/page/user/order">返回订单列表</a>
	</div>	

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
		<p>电话：010-8888888    京ICP备88888888号</p>
	</div>

	<script type="text/javascript">
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});
		layui.use(['form', 'laydate', 'util','upload', 'rate'], function(){

			var queryString = window.location.search;
			var urlParams = new URLSearchParams(queryString);
			var orderNo = urlParams.get("orderNo");
			$('#trackNumber').text(orderNo);
			$('#orderNo').val(orderNo);


			var form = layui.form;
			var layer = layui.layer;
			var upload = layui.upload;

			var rate = layui.rate;
			// 渲染
			rate.render({
				elem: '#ID-rate-demo-setText-1',
				choose: function(value){
					console.log("当前的评分是：" + value); // 打印当前的评分
					document.getElementById('hiddenRating').value = value; // 将评分值设置到隐藏的 input 字段
				}
			});

			//常规使用 - 普通图片上传
			var uploadInst = upload.render({
				elem: '#uploadId'
				, url: '/upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
				, before: function (obj) {
					//预读本地文件示例，不支持ie8
					obj.preview(function (index, file, result) {
						$('#demo1').attr('src', result); //图片链接（base64）
					});
				}
				, done: function (result) {
					if (result.code == 0) {
						$('#imageId').val(result.data);
						$('#demoText').html(''); //置空上传失败的状态
					} else {
						mylayer.errorMsg(result.msg);
					}
				}
				, error: function () {
					//演示失败状态，并实现重传
					var demoText = $('#demoText');
					demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
					demoText.find('.demo-reload').on('click', function () {
						uploadInst.upload();
					});
				}
			});

			// 提交事件
			form.on('submit(evaluateAdd)', function(data){
				var field = data.field; // 获取表单字段值
				$.post(
						'/evaluate/add',
						field,
						function (result) {
							console.log(result);
							if (result.code == 0) {
								mylayer.okUrl(result.msg, '/page/order/detail?orderNo='+orderNo);
							} else {
								mylayer.errorMsg(result.msg);
							}
						},
						'json'
				);
				return false; // 阻止默认 form 跳转
			});
			$.post(
					'/order/orderByOrderNo',
					{'orderNo': orderNo},
					function (result) {
						if (result.code == 0) {
							if (result.data.status === 50) {
								var html = '';
								$(result.data).each(function () {
									html += '<div class="layui-timeline-item">'
									html += '	<i class="layui-icon layui-timeline-axis"></i>'
									html += '	<div class="layui-timeline-content layui-text">'
									html += '		<h3 class="layui-timeline-title">已签收</h3>'
									html += '		<p>快递已签收</p>'
									html += '	</div>'
									html += '</div>'
								});
								$('#qianshou').append(html);
							}
						}
					},
					'json'
			);
			$.post(
					'/order/orderItemByOrderNo',
					{'orderNo': orderNo},
					function (result) {
						if (result.code == 0) {
							var html = '';
							var count = 1; // 初始化计数器
							var totalQuantity = 0; // 初始化商品总数量
							var totalPrice = 0; // 初始化总金额
							$('#LAY_OrderCartList').empty();
							$(result.data).each(function () {
								html += '<tr>'
								html += '	<th>'+count+'</th>'
								html += '	<th><img src="'+this.productImage+'"></th>'
								html += '	<th>'+this.productName+'</th>'
								html += '	<th>'+this.currentUnitPrice+'元</th>'
								html += '	<th>'+this.quantity+'</th>'
								html += '	<th>'+this.currentUnitPrice+'元</th>'
								html += '</tr>'
								count++;
								totalQuantity += this.quantity; // 累加商品数量
								totalPrice += this.quantity * this.currentUnitPrice; // 累加总金额
							});
							$('#LAY_OrderCartList').append(html);
							$('.total_goods_count em').text(totalQuantity); // 更新商品总数量
							$('#totalCost').text(totalPrice); // 更新商品总价格
						}
					},
					'json'
			);



		});
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user/logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okMsg(result.msg);
										setTimeout(function() {
											window.location.reload();
										}, 800);
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		}

	</script>
</body>
</html>